<template>
  <div class="app-container search-list">
    <table-pagination
        ref="el-search-table"
        :fetch="getData"
        type="remote"
        :page-sizes="[20, 50, 100]"
        :columns="columns"
        :form-options="formOptions"
        :adaptive = "fixOption"
        height="100px"
        list-field="records"
        total-field="totalElements"
        page-index-key="page"
        page-size-key="pageSize"
        method="get"
        @selection-change="handleSelectionChange">
      <template slot="button">
        <div class="material-btns">
        <upload-file accept="image/jpeg,image/jpg,image/png"
                     :drag="true"
                     :fileType="['png', 'jpg', 'jpeg']"
                     :isShowTip="true"
                     :lazy="true"
                     :responseFn="handleResponse"
                     :action="uploadPath"
                     title="图片"
        ></upload-file>
          <el-button type="danger" class="delBtn" size="mini" @click="handleBatchDelete()" v-if="selectedIdList.length>0">批量删除</el-button>
        </div>
      </template>
      <template slot-scope="scope" slot="img">
        <el-image
            style="width: 80px; height: 60px"
            :src="scope.row.url"
            :preview-src-list="[scope.row.url]"
            fit="contain"></el-image>
      </template>
      <template slot-scope="scope" slot="url">
        <span>{{scope.row.url}}</span>
        <el-button
            type="text"
            icon="el-icon-document-copy"
            @click="handleCopy(scope.row.url)"></el-button>
      </template>
      <el-table-column label="操作" slot="append">
        <template slot-scope="scope">
          <el-button  size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </table-pagination>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import { getMaterialPage, deleteMaterial } from '@/api/material';
import uploadFile from '_c/Upload/uploadFile';
export default {
    name: 'material-list',
    components: {
        uploadFile,
        TablePagination
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        },
        uploadPath () {
            return process.env.VUE_APP_BASE_API + '/upload-file?siteId=' + this.siteId;
        }
    },
    data () {
        return {
            fixOption: {fixedHeader: true},
            list: null,
            listLoading: true,
            loadingBtn: false,
            pageParams: {
                page: 1,
                pageSize: 20,
                type: ''
            },
            formOptions: {
                showResetBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [
                    { prop: 'type',
                        label: '素材类型:',
                        itemType: 'select',
                        options: [
                            { value: '', label: '所有类型' },
                            { value: 1, label: '商品素材' },
                            { value: 2, label: '上传素材' }
                        ]
                    }
                ]
            },
            columns: [
                {label: '', type: 'selection'},
                {label: '图片', prop: 'url', slotName: 'img'},
                {label: '图片名称', prop: 'name'},
                {label: '地址', prop: 'url', width: '300px', slotName: 'url'},
                {label: '大小',
                    prop: 'size',
                    render: row => {
                        if (row.size / 1024 / 1024 < 1) {
                            return (row.size / 1024).toFixed(2) + 'KB';
                        } else {
                            return (row.size / 1024 / 1024).toFixed(2) + 'MB';
                        }
                    }
                },
                {label: '类型',
                    prop: 'type',
                    render: row => {
                        if (row.type === 1) {
                            return '商品素材';
                        }
                        return '上传素材';
                    }
                }
            ],
            tableData: [],
            selectedList: [],
            selectedIdList: []
        };
    },
    methods: {
        handleSelectionChange (records) {
            if (records && records.length > 0) {
                let tempIdList = [];
                records.forEach(item => {
                    tempIdList.push(item.id);
                });
                this.selectedIdList = tempIdList;
                this.selectedList = records;
            } else {
                this.selectedIdList = [];
                this.selectedList = [];
            }
        },
        handleResponse (response, file, fileList) {
            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
            return response;
        },
        getData (params) {
            this.pageParams.siteId = this.siteId;
            return new Promise((resolve, reject) => {
                getMaterialPage({...this.pageParams, ...params}).then((res) => {
                    resolve(res);
                });
            });
        },
        handleDelete (id) {
            this.$confirm('确认删除该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMaterial({siteId: this.siteId, ids: id}).then(res => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            });
        },
        handleBatchDelete () {
            this.$confirm('确认删除这些数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMaterial({siteId: this.siteId, ids: this.selectedIdList.join(',')}).then(res => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            });
        },
        handleCopy (value) {
            this.$copyText(value).then(() => {
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            });
        }
    }
};
</script>

<style lang="scss">
.material-btns{
  display: flex;
  align-items: center;
  .ele-upload-image {
    margin-right: 12px;
    .ele-pic-dialog{
      display: none;
    }
  }
}
.delBtn {
  width: 80px;
  height: 32px;
  margin-top: -6px;
}
</style>
